<template>
    <div class="login">
        <div class="login-bg bg-top"></div>
        <div class="login-bg bg-bottom"></div>
        <div class="login-center">
            <div class="icon"></div>
            <p class="title">趣游戏后台管理平台</p>
            <el-form
                :model="ruleForm"
                :hide-required-asterisk="true"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="auto">
                <template v-if="noUser">
                    <el-form-item label="手机号" prop="phone">
                        <el-input type="number"
                            v-model="ruleForm.phone"
                            prefix-icon="el-icon-phone-outline"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <div class="code-box">
                        <el-form-item label="验证码" prop="vcode" class="code-input">
                            <el-input type="number" v-model="ruleForm.vcode" prefix-icon="el-icon-phone-outline" autocomplete="off" maxlength="6"></el-input>
                        </el-form-item>
                        <div class="code-btn code-disabled" v-if="isgetCode"><span>{{time}}秒后重新获取</span></div>
                        <div class="code-btn" v-else><span @click="getCode">获取验证码</span></div>
                    </div>
                    <el-form-item label="邮箱" prop="email">
                        <el-input
                            v-model="ruleForm.email"
                            prefix-icon="el-icon-position"
                            autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="ruleForm.nickname" prefix-icon="el-icon-user" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password"
                            prefix-icon="el-icon-lock"
                            autocomplete="off"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="rpassword">
                        <el-input type="password" v-model="ruleForm.rpassword" prefix-icon="el-icon-lock" autocomplete="off" show-password></el-input>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="邮箱" prop="email">
                        <el-input
                            v-model.trim="ruleForm.email"
                            @keyup.enter.native="submitForm"
                            prefix-icon="el-icon-position"
                            autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password"
                            v-model.trim="ruleForm.password"
                            @keyup.enter.native="submitForm"
                            prefix-icon="el-icon-lock"
                            autocomplete="off"
                            show-password></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <div class="btn-box" v-if="noUser">
                <div class="btn cancel-btn"><span @click="noUser = false">取  消</span></div>
                <div class="btn sure-btn" @click="beforCreateUser"><span>注  册</span></div>
            </div>
            <div class="btn-box" v-else>
                <div class="btn cancel-btn"><span @click="noUser = true">去 注 册</span></div>
                <div class="btn sure-btn" @click="submitForm"><span>登  录</span></div>
            </div>
        </div>
    </div>
</template>

<script>
import { setStore } from '@/utils/utils'
import md5 from '@/utils/md5.min.js'
export default {
    data () {
        const validatePhoen = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号'))
            } else if (value.length !== 11) {
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        }
        const validateCode = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入验证码'))
            } else if (value.length !== 4) {
                callback(new Error('请输入正确的验证码'))
            } else {
                callback()
            }
        }
        const validateEmail = (rule, value, callback) => {
            if (!value.includes('@')) {
                callback(new Error('请输入正确的邮箱'))
            } else {
                callback()
            }
        }
        const validatePass2 = (rule, value, callback) => {
            if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }

        const validatePassLength = (rule, value, callback) => {
            if (value && value.length && value.length < 6) {
                callback(new Error('最少输入六位密码!'))
            } else {
                callback()
            }
        }
        return {
            ruleForm: {
                // phone: '18550994445',
                // vcode: '9988',
                // email: '1540330774@qq.com',
                // nickname: '凌崎峰',
                // password: '478745887',
                // rpassword: '478745887'
                phone: '',
                vcode: '',
                email: '',
                nickname: '',
                password: '',
                rpassword: ''
            },
            rules: {
                phone: [
                    { validator: validatePhoen, trigger: 'blur' }
                ],
                vcode: [
                    { validator: validateCode, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'change' },
                    { validator: validateEmail, trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'change' },
                    { validator: validatePassLength, trigger: 'blur' }
                ],
                rpassword: [
                    { validator: validatePass2, trigger: 'blur' },
                    { validator: validatePassLength, trigger: 'blur' },
                    { required: true, message: '请再次输入密码', trigger: 'change' }
                ]
            },
            isgetCode: false,
            time: 60,
            noUser: false
        }
    },
    methods: {
        submitForm () {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (valid) {
                    let params = {
                        name: this.ruleForm.email,
                        password: md5(this.ruleForm.password)
                    }
                    let res = await this.$http.post('/account/login', params)
                    if (res.code === '0') {
                        // 正常登陆
                        if (res.data.status === 1) {
                            setStore('userInfo', res.data)
                            this.$router.push('/')
                            // 审核中
                        } else if (res.data.status === 0) {
                            this.$message({
                                type: 'error',
                                message: '账号正在审核中，请耐心等待'
                            })
                            // 审核不通过
                        } else if (res.data.status === 2) {
                            this.$message({
                                type: 'error',
                                message: '审核不通过，如有疑问请联系管理员'
                            })
                            // 账号已停用
                        } else if (res.data.status === 3) {
                            this.$message({
                                type: 'error',
                                message: '账号已停用，如有疑问请联系管理员'
                            })
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.desc
                        })
                    }
                } else {
                    return false
                }
            })
        },

        // 获取验证码
        async getCode () {
            this.$refs.ruleForm.validateField('phone')
            if (this.ruleForm.phone.length === 11) {
                let params = {
                    phone: this.ruleForm.phone
                }
                let res = await this.$http.post('/account/sendRegisterVCode', params)
                if (res.code === '0') {
                    this.isgetCode = true
                    this.time = 60
                    this.timerId = setInterval(() => {
                        this.time--
                        if (this.time <= 0) {
                            this.isgetCode = false
                            clearInterval(this.timerId)
                        }
                    }, 1000)
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            }
        },

        beforCreateUser () {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (valid) {
                    this.creatUser()
                } else {
                    return false
                }
            })
        },

        // 注册账号
        async creatUser () {
            let params = { ...this.ruleForm }
            params.password = md5(params.password)
            delete params.rpassword
            let res = await this.$http.post('/account/register', params)
            if (res.code === '0') {
                // 正常登陆
                if (res.data.status === 1) {
                    setStore('userInfo', res.data)
                    this.$router.push('/')
                // 审核中
                } else if (res.data.status === 0) {
                    this.$message({
                        type: 'error',
                        message: '账号正在审核中，请耐心等待'
                    })
                // 审核不通过
                } else if (res.data.status === 2) {
                    this.$message({
                        type: 'error',
                        message: '审核不通过，如有疑问请联系管理员'
                    })
                // 账号已停用
                } else if (res.data.status === 3) {
                    this.$message({
                        type: 'error',
                        message: '账号已停用，如有疑问请联系管理员'
                    })
                }
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        }
    },
    destroyed () {
        clearInterval(this.timerId)
    }
}
</script>

<style lang="scss" scoped>
    .login {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        height: 100%;
        background-image: linear-gradient(to left, #aca9a7 0%, #304352 100%);
        // background-image: linear-gradient(to bottom, #d7d2cc 0%, #304352 100%);
        .login-bg {
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 1;
            height: 50%;
            background-image: url('./img/img.png');
            background-size: 1440px 496px;
            background-repeat: no-repeat;
        }
        .bg-top {
            top: 0;
        }
        .bg-bottom {
            bottom: 0;
            transform: rotate(180deg);
            // background-position-x: 0;
            background-position: right 0;
        }
        .login-center {
            position: absolute;
            top: 20%;
            left: 50%;
            z-index: 2;
            transform: translateX(-50%);
            width: 100%;
            max-width: 500px;
            .icon {
                width: 80px;
                height: 80px;
                background-size: 100% 100%;
                border-radius: 10px;
                margin: 0 auto;
                background-image: url('../../assets/img/icon.png');
            }
            .title {
                color: #ffffff;
                text-align: center;
                margin: 10px 0 20px;
                font-size: 30px;
            }
            .code-box {
                display: flex;
                .code-input {
                    flex: 1;
                }
                .code-btn {
                    color: #ffffff;
                    height: 40px;
                    width: 125px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    margin-left: 10px;
                    > span {
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
                .code-disabled {
                    > span {
                        cursor: no-drop;
                        &:hover {
                            text-decoration: none;
                        }
                    }
                }
            }
            /deep/ .el-form-item__label {
                color: #ffffff;
            }
            .btn-box {
                display: flex;
                justify-content: space-around;
                .cancel-btn {
                    background-color: inherit;
                    > span {
                        cursor: pointer;
                        &:hover {
                            opacity: .8;
                            text-decoration: underline;
                        }
                    }
                }
                .sure-btn {
                    cursor: pointer;
                    &:hover {
                        opacity: .8;
                        text-decoration: underline;
                    }
                }
            }
            .btn {
                width: 200px;
                height: 40px;
                font-size: 20px;
                color: #ffffff;
                margin: 10px auto 0;
                background-color: rgb(53, 68, 81);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
            }
        }
    }
</style>
